<template>
    <div>
      <img src="../../assets/images/logo.png" class="logo" v-if="showImg" @click="$router.push('/')">
      <div class="login-card-box" :style="{margin: showImg ? '100px auto':'30px auto'}">
        <div class="title-box">
          <span class="login-title" @click="$router.push('/login')">登录</span>
          <span class="point">·</span>
          <span class="register-title" @click="$router.push('/register')">注册</span>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="" label-width="0" prop="username">
            <el-input placeholder="邮箱地址" prefix-icon="iconfont icon-youxiang-cuxiantiao-fill"  v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="password">
            <el-input type="password" placeholder="密码" prefix-icon="iconfont icon-mima" v-model="ruleForm.password" @keyup.enter.native="login"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" class="login-button" @click="login">{{loginButtonText}}</el-button>
      </div>
      <img src="../../assets/images/logo.png" class="mobile-logo" v-if="!showImg" @click="$router.push('/')">
    </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  import {login,getUser} from "../../api/user";
  import Cookies from 'js-cookie'
  import NProgress from 'nprogress'
  import axios from 'axios'

  export default {
      name: "index",
      layout:'clean',
      computed:{
        ...mapState('base', {
          showImg: state => state.showImg,
        })
      },
      data(){
        return{
          ruleForm:{
            username:'',
            password:''
          },
          loginButtonText:'快速登录',
          rules: {
            username: [
              {required: true, message: '请输入您的邮箱账号', trigger: 'blur'},
              {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'},
            ],
            password: [
              {required: true, message: '请输入您的密码', trigger: 'blur'},
              {min: 8, message: '密码最少为8位', trigger: 'blur'}
            ],
          }
        }
      },
      methods:{
        ...mapMutations('base', [
          'SET_showImg'
        ]),
        ...mapMutations('user', [
          'SET_token',
          'SET_header_image'
        ]),
        login(){
          let vm=this;
          vm.loginButtonText='正在登陆中...';
          NProgress.start();
          vm.$refs['ruleForm'].validate((valid) => {
            if (valid) {
              login(vm.ruleForm).then(res=>{
                NProgress.done();
                Cookies.remove('token');
                Cookies.set('token',res.data.token,{ expires: 7, path: '' });
                vm.SET_token(res.data.token);
                axios.defaults.headers.common['Authorization'] = `JWT ${res.data.token}`;
                vm.$router.push('/');
              }).catch(error=>{
                NProgress.done();
                vm.loginButtonText='快速登录';
                vm.$message.error('登录失败!');
              })
            } else {
              vm.loginButtonText='快速登录';
              vm.$message.error('请完整填写信息！');
              return false;
            }
          });
        },
      }
    }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

  .login-card-box{
    max-width 400px
  }
  .logo{
    width: 100px;
    height: 100px;
    margin 40px 0 0 50px
    cursor pointer
  }
  .mobile-logo{
    width 60px
    height 60px
    position absolute
    right 15px
    bottom 15px
  }
  .login-button{
    margin 0 auto
    width 100%
  }
  .title-box{
    text-align center
    padding-top  60px
    margin-bottom 50px
  }
  .login-title{
    font-size 20px
    font-weight 700
    cursor pointer
    color $color-main
    border-bottom 2px solid $color-main
    padding-bottom 5px
  }
  .point{
    font-size 25px
    font-weight 700
    color $color-gray
    margin-left 5px
    margin-right 5px
  }
  .register-title{
    font-size 18px
    cursor pointer
    color $color-gray
    padding-bottom 5px
  }

</style>
